<!DOCTYPE html>
<html lang="en" class="transition-all duration-500">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>Warriors Name Generator</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script> 
  <style>
    /* 流光渐变动效 */
    @keyframes shine {
      0% { background-position: -50% 0; }
      100% { background-position: 150% 0; }
    }
    .animate-shine {
      animation: shine 4s linear infinite;
      background-size: 300% 100%;
    }
    /* 动态渐变文本 */
    @keyframes gradient-x {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .animate-gradient-x {
      background: linear-gradient(270deg, #ec4899, #8b5cf6, #6366f1, #ec4899);
      background-size: 600% 600%;
      animation: gradient-x 15s ease infinite;
    }
    body {
      font-family: 'Segoe UI', sans-serif;
    }
  </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 flex items-center justify-center p-4 transition-all duration-500">
  <!-- 背景光晕 -->
  <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
    <div class="absolute -top-1/4 -left-1/4 w-full h-full rounded-full bg-gradient-to-r from-pink-500/20 via-purple-500/20 to-blue-500/20 blur-3xl animate-pulse"></div>
    <div class="absolute top-1/2 left-1/2 w-full h-full rounded-full bg-gradient-to-r from-blue-500/20 via-green-500/20 to-yellow-500/20 blur-3xl animate-pulse opacity-70" style="animation-delay: 2s;"></div>
  </div>

  <div class="w-full max-w-md mx-auto px-4 z-10">
    <!-- 导航栏 -->
    <header class="mb-6 px-4">
      <nav class="bg-white/80 backdrop-blur-lg rounded-xl shadow-lg p-4 border border-gray-200/50 dark:border-gray-700/50 transition-all duration-300 hover:shadow-xl dark:bg-gray-800/80">
        <div class="flex justify-between items-center">
          <a href="#" class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-600 via-purple-600 to-indigo-600">Warriors Name</a>
          <div class="flex items-center space-x-4">
            <button onclick="toggleDarkMode()" class="p-2 rounded-full bg-gradient-to-r from-purple-100 to-indigo-100 dark:from-gray-700 dark:to-gray-600 text-gray-700 dark:text-gray-200 hover:scale-110 transform transition-transform duration-300" aria-label="Toggle Dark Mode">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="3" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
              </svg>
            </button>
            <button onclick="toggleMobileMenu()" class="md:hidden text-gray-600 focus:outline-none dark:text-gray-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
        <!-- 桌面菜单 -->
        <ul class="hidden md:flex space-x-6 items-center mt-4 md:mt-0">
          <li><a href="../en/" class="text-gray-700 hover:text-purple-600 transition-colors dark:text-gray-300 dark:hover:text-purple-400">Return to Home</a></li>
          <li class="relative group">
            <span class="cursor-pointer text-gray-700 hover:text-purple-600 transition-colors dark:text-gray-300 dark:hover:text-purple-400">Language</span>
            <ul class="absolute hidden group-hover:block bg-white shadow-lg rounded-lg py-2 w-40 mt-2 z-20 dark:bg-gray-800 dark:shadow-gray-900">
              <li><a href="../zh-cn/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900 dark:hover:text-white">中文（中国大陆）</a></li>
              <li><a href="../zh-tw/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900 dark:hover:text-white">中文（台灣）</a></li>
              <li><a href="../en/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900 dark:hover:text-white">English</a></li>
            </ul>
          </li>
          <li><a href="https://gitlab.com/Qinshihuang233/warriors-name"  target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-purple-600 transition-colors dark:text-gray-300 dark:hover:text-purple-400">Project Address</a></li>
          <li><a href="./about-en/" class="text-gray-700 hover:text-purple-600 transition-colors dark:text-gray-300 dark:hover:text-purple-400">About</a></li>
        </ul>
        <!-- 移动端下拉菜单 -->
        <ul id="mobile-menu" class="hidden mt-4 space-y-2 md:hidden bg-gray-50/80 backdrop-blur-sm rounded-xl p-4 shadow-inner dark:bg-gray-800/50">
          <li><a href="../en/" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">Return to Home</a></li>
          <li>
            <details class="group">
              <summary class="text-gray-700 hover:text-purple-600 cursor-pointer dark:text-gray-300 dark:hover:text-purple-400 flex justify-between items-center">
                <span>Language</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" className="group-open:rotate-180 transition-transform">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </summary>
              <ul class="ml-4 mt-2 space-y-1">
                <li><a href="../zh-cn/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900 dark:hover:text-white">中文（中国大陆）</a></li>
                <li><a href="../zh-tw/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900 dark:hover:text-white">中文（台灣）</a></li>
                <li><a href="../en/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900 dark:hover:text-white">English</a></li>
              </ul>
            </details>
          </li>
          <li><a href="https://gitlab.com/Qinshihuang233/warriors-name"  target="_blank" rel="noopener noreferrer" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">Project Address</a></li>
          <li><a href="./about-en/" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">About</a></li>
        </ul>
      </nav>
    </header>

    <!-- 卡片区域 -->
    <main class="bg-white/80 backdrop-blur-lg rounded-3xl shadow-xl p-6 relative overflow-hidden transform transition-all duration-500 hover:shadow-2xl hover:-translate-y-1 border border-gray-200/50 dark:border-gray-700/50">
      <!-- 流光层 -->
      <div class="absolute inset-0 bg-gradient-to-r from-pink-500/10 via-purple-500/20 to-indigo-500/10 opacity-30 blur-xl pointer-events-none animate-shine"></div>
      <!-- 名字显示区域 -->
      <div class="mb-6">
        <h1 id="displayName" class="text-5xl font-extrabold text-center mb-2 bg-clip-text text-transparent animate-gradient-x">
          Warrior Name
        </h1>
        <!-- 进度条 -->
        <div class="h-1.5 rounded-full overflow-hidden">
          <div class="h-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 animate-shine" style="background-size: 300% 100%;"></div>
        </div>
      </div>
      <!-- 主要操作按钮 -->
      <div class="mb-6">
        <button onclick="generateName()" class="group relative overflow-hidden w-full rounded-xl bg-gradient-to-b from-pink-500 to-purple-600 text-white font-medium shadow-lg transform transition-all duration-300 hover:scale-105 active:scale-95 flex flex-col items-center justify-center py-3">
          <span>🐾</span>
          <span class="text-sm mt-1">Generate</span>
          <div class="absolute inset-0 bg-gradient-to-b from-yellow-300 to-pink-300 opacity-0 group-hover:opacity-20 transition-opacity"></div>
        </button>
      </div>
      <!-- 设置选项 -->
      <div class="space-y-5 z-10 relative">
        <div class="flex items-center justify-between bg-gray-50/80 backdrop-blur-sm rounded-xl px-5 py-4 shadow-inner-toggle border border-gray-200/50 dark:border-gray-700/50">
          <label for="includeUnderage" class="text-base font-medium text-gray-700 dark:text-gray-300">Allow kit and apprentice names</label>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" id="includeUnderage" checked class="sr-only peer" />
            <div class="w-12 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gradient-to-r peer-checked:from-pink-500 peer-checked:to-purple-500"></div>
          </label>
        </div>
        <div class="flex items-center justify-between bg-gray-50/80 backdrop-blur-sm rounded-xl px-5 py-4 shadow-inner-toggle border border-gray-200/50 dark:border-gray-700/50">
          <label for="ignoreWeighting" class="text-base font-medium text-gray-700 dark:text-gray-300">Ignore affix weighting</label>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" id="ignoreWeighting" class="sr-only peer" />
            <div class="w-12 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gradient-to-r peer-checked:from-pink-500 peer-checked:to-purple-500"></div>
          </label>
        </div>
      </div>
    </main>

    <!-- 底部版权 -->
    <footer class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
      <p>© 2025 Warriors Name - Open Source Warriors Name Generator</p>
    </footer>
  </div>

  <!-- 数据加载脚本 -->
  <script async src="../data/en.js"></script>
  <!-- 页面逻辑脚本 -->
  <script>
    let prefixes = [];
    let suffixes = [];
    let totalApprentices = 0;
    let totalKits = 0;
    let unweightedPrefixes = [];
    let unweightedSuffixes = [];

    function changeIncludeUnderage() {
      document.getElementById("ignoreWeighting").disabled = !document.getElementById("includeUnderage").checked;
    }

    function changeIgnoreWeighting() {
      const ignore = document.getElementById("ignoreWeighting").checked;
      const include = document.getElementById("includeUnderage").checked;
      prefixes = ignore ? unweightedPrefixes : data.prefixes;
      suffixes = ignore ? unweightedSuffixes : data.suffixes;
    }

    function generateName() {
      const includeUnderage = document.getElementById("includeUnderage").checked;
      const ignoreWeighting = document.getElementById("ignoreWeighting").checked;
      const realPrefixes = ignoreWeighting ? unweightedPrefixes : data.prefixes;
      const realSuffixes = ignoreWeighting ? unweightedSuffixes : data.suffixes;
      let prefix = realPrefixes[Math.floor(Math.random() * realPrefixes.length)];
      let suffix;
      let kit = false;
      let randomIndex;

      if (includeUnderage) {
        randomIndex = Math.floor(Math.random() * (realSuffixes.length + data.apprentices + data.kits));
        if (randomIndex < realSuffixes.length) {
          suffix = realSuffixes[randomIndex];
        } else if (randomIndex < realSuffixes.length + data.apprentices) {
          suffix = "paw";
        } else {
          kit = true;
        }
      } else {
        suffix = realSuffixes[Math.floor(Math.random() * realSuffixes.length)];
      }

      const fullName = kit ? "kit" + prefix : prefix.charAt(0).toUpperCase() + prefix.slice(1) + suffix;
      document.getElementById("displayName").textContent = fullName;
    }

    function toggleDarkMode() {
      const isDark = !document.documentElement.classList.contains('dark');
      document.documentElement.classList.toggle('dark', isDark);
      localStorage.setItem('darkMode', isDark);
    }

    function toggleMobileMenu() {
      const menu = document.getElementById("mobile-menu");
      menu.classList.toggle("hidden");
    }

    // 初始化加载
    document.addEventListener('DOMContentLoaded', () => {
      const savedDarkMode = localStorage.getItem('darkMode') === 'true';
      document.documentElement.classList.toggle('dark', savedDarkMode);

      // 监听数据加载完成
      const checkData = setInterval(() => {
        if (typeof data !== 'undefined') {
          clearInterval(checkData);
          init();
        }
      }, 100);
    });

    function init() {
      prefixes = data.prefixes;
      suffixes = data.suffixes;
      totalApprentices = data.apprentices;
      totalKits = data.kits;
      unweightedPrefixes = [...new Set(prefixes)];
      unweightedSuffixes = [...new Set(suffixes)];

      const includeUnderageCheckbox = document.getElementById("includeUnderage");
      const ignoreWeightingCheckbox = document.getElementById("ignoreWeighting");

      includeUnderageCheckbox.addEventListener('change', changeIncludeUnderage);
      ignoreWeightingCheckbox.addEventListener('change', changeIgnoreWeighting);
      generateName();
    }
  </script>
</body>
</html>